<template>
    <div class="introduce">
        <van-nav-bar title="医院介绍" left-arrow @click-left="onClickLeft" />
        <div class="introduceImg">
            <img src="https://cdn7.axureshop.com/demo/2208121/images/%E5%BE%AE%E5%AE%98%E7%BD%91/u6427.png" alt="">
        </div>
        <van-tabs v-model:active="activeName" class="swipeable">
            <van-tab title="医院简介" name="医院简介">
                <div class="introduceText">
                    <p style="margin-top: 20px;">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;四川省保健院是一所以急救医学、耳鼻喉专业学科为特色，融医疗、教学、科研、预防、保健为一体的综合性三级甲等医院。</p>
                    <p style="margin-top: 20px;">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2003年成建制划转为四川省保健院直属附属医院，现为一所集医疗、科研、教学、健康管理为一体的国家级和省级三级甲等中西医结合医院。医院先后入选全国重点中西医结合医院、国家中医药传承创新工程重点中医医院建设单位、国家中医临床研究基地建设单位、国家中医药传承创新中心建设单位、国家中医药传承创新中心项目储备库。累计3年在国家三级公立医院绩效考核中获评A级，位居全国中西医结合医院前十强。
                    </p>
                    <p style="margin-top: 20px;">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;医院设有主院区、四川省保健院南苑、四川省保健院北苑和四川省保健院体检中心纳入医院同质化管理，主院区核定床位1200张。</p>
                </div>

            </van-tab>
            <van-tab title="医院荣誉" name="医院荣誉">
                <div class="introduceText2">
                    <div class="introduceFlex">
                        <div class="u6586">
                            1
                        </div>
                        <p style="font-weight: 700;">2000年</p>
                    </div>

                    <div class="introduceFlex2">
                        <div class="u65862">

                        </div>
                        <div style="margin-left: 10px; display: flex; align-items: center;">
                            <img style="width: 18px;" src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E9%99%A2%E7%AE%80%E4%BB%8B/u6597.svg
" alt="">
                            &nbsp;
                            <span>我院荣获最佳”全国十佳医院”</span>
                        </div>
                    </div>

                    <div class="introduceFlex">
                        <div class="u6586">
                            2
                        </div>
                        <p style="font-weight: 700;">2003年</p>
                    </div>

                    <div class="introduceFlex2">
                        <div class="u65862">
                        </div>
                        <div style="margin-left: 10px; display: flex; align-items: center;">
                            <img style="width: 18px;" src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E9%99%A2%E7%AE%80%E4%BB%8B/u6597.svg
" alt="">
                            &nbsp;
                            <span>我院荣获最佳”四川省十佳医院”</span>
                        </div>
                    </div>

                    <div class="introduceFlex">
                        <div class="u6586">
                            3
                        </div>
                        <div>
                            <div>
                                <span style="font-weight: 700;"> 2020年</span>

                                <br />
                                <div style="display: flex; align-items: center;">
                                    <img style="width: 18px;" src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E9%99%A2%E7%AE%80%E4%BB%8B/u6597.svg
" alt="">
                                    &nbsp;
                                    <span>我院土豆护士荣获最佳”四川省十佳护士</span>
                                </div>
                                <div style="display: flex; align-items: center;">
                                    <img style="width: 18px;" src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E9%99%A2%E7%AE%80%E4%BB%8B/u6597.svg
" alt="">
                                    &nbsp;
                                    <span>我院西红柿医生手术标准荣获最佳"手术标准化大奖</span>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

            </van-tab>
            <van-tab title="医院电话" name="医院电话">

                <div class="inpText">
                    <img src="https://cdn7.axureshop.com/demo/2208121/images/%E7%A7%91%E5%AE%A4%E5%88%97%E8%A1%A8/u684.svg"
                        alt="" class="imginp">
                    <input class="input" v-model="searchTxt" placeholder="可输入医生名称" type="text" @input="filterItems">
                    <img v-show="searchTxt ? true : false" class="imginp2"
                        src="https://cdn7.axureshop.com/demo/2208121/images/%E7%A7%91%E5%AE%A4%E5%88%97%E8%A1%A8/u685.svg"
                        alt="" @click="clearInp">
                    <div class="headerText">
                        <div class="headerText2">
                            <span>科室</span>
                            <span>电话号码</span>
                        </div>
                        <div class="text3">
                            <span>门诊外一科</span>
                            <span>0000-66666666</span>
                        </div>
                        <div class="text3">
                            <span>门诊外一科</span>
                            <span>0000-66666666</span>
                        </div>
                        <div class="text3">
                            <span>门诊外一科</span>
                            <span>0000-66666666</span>
                        </div>
                    </div>

                </div>
            </van-tab>
            <van-tab title="来院导航" name="来院导航">


                <div class="inpText3">
                    <div style="line-height: 30px;margin-top: 10px;">
                        <div class="to1">
                            <img style="width: 18px;height: 18px;"
                                src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E9%99%A2%E7%AE%80%E4%BB%8B/u6635.svg"
                                alt="">
                            <p style="color: #7f7f7f;">医院地址</p>
                        </div>
                        <p style="font-weight: 700;">四川省保健院南苑</p>
                        <div style="display: flex;justify-content: space-between;">
                            <p>四川省保成都市锦江区画溪路666号</p>
                            <p style="color: #1677ff;" @click="toMap">去导航</p>
                        </div>

                    </div>

                    <div style="line-height: 30px;margin-top:20px;">
                        <div class="to1">
                            <img style="width: 18px;height: 18px;"
                                src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E9%99%A2%E7%AE%80%E4%BB%8B/u6640.svg"
                                alt="">
                            <p style="color: #7f7f7f;">周边公交</p>
                        </div>
                        <p>5路、6路、8路、520路</p>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const onClickLeft = () => history.back();

const activeName = ref('医院简介');
const searchTxt = ref('')


const clearInp = () => {
    searchTxt.value = ''
}


// 去导航
const toMap = () => {
    window.location.href = 'https://uri.amap.com/navigation?from=104.075947,30.633868,四川省保健院南苑&to=104.075947,30.633868,四川省保健院南苑&via=&mode=&policy=&src=&coordinate=gaode&callnative=0'
}

</script>

<style lang="scss" scoped>
.introduce {
    position: relative;

    .swipeable {
        width: 100%;
        position: absolute;
        top: 230px;
        left: 0px;
    }

    .introduceImg {
        width: 100%;
        height: 100%;

        img {
            width: 100%;
            height: 100%;
        }

    }

    .introduceText {
        padding: 0 16px;
        font-size: 14px;
        color: #333333;
        line-height: 24px;
    }

    .introduceText2 {
        padding: 16px;

        .introduceFlex {
            display: flex;
            align-items: center;
            gap: 20px;

            .u6586 {
                width: 20px;
                height: 20px;
                left: 20px;
                top: 20px;
                width: 25px;
                height: 25px;
                color: #1677FF;
                border: 2px solid #1677FF;
                text-align: center;
                line-height: 25px;
                border-radius: 25px;
                background-color: #e6f4ff;
            }
        }

        .introduceFlex2 {
            display: flex;
            align-items: center;
            gap: 20px;

            .u65862 {
                width: 2px;
                height: 60px;
                background-color: #1677FF;
                margin-left: 13px;
            }
        }

    }

    .inpText {
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
        position: relative;

        .imginp {
            width: 18px;
            height: 18px;
            position: absolute;
            top: 25px;
            left: 25px;
        }

        .imginp2 {
            width: 18px;
            height: 18px;
            position: absolute;
            top: 25px;
            right: 25px;
        }

        .input {
            width: 100%;
            height: 40px;
            border: none;
            background-color: #f2f2f2;

            padding-left: 30px;
            box-sizing: border-box;
            font-size: 14px;
            border-radius: 8px;
        }
    }


    .headerText {
        margin-top: 20px;

        .headerText2 {
            display: flex;
            justify-content: space-between;
            padding-right: 88px;
        }

        .text3 {
            margin-top: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid #d7d7d7;
            display: flex;
            justify-content: space-between;
            padding-right: 50px;
        }
    }

    .to1 {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .inpText3 {
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
        position: relative;
    }

}
</style>